<template>
<div>
   <div class="mapCon" :style="mapStyle" id="map">
  </div>
</div>
 

</template>

<script>
import echarts from "echarts";
require("echarts/map/js/china.js");
require("echarts/dist/extension/bmap.min.js");
import chart from "@/components/Charts/chart";
export default {
  name: "index",
  props: {
    mapStyle: {
      type: String,
      default: () => {
        return "";
      }
    },
    hoverObj: {
      type: Array,
      default: () => {
        return [];
      }
    },
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  components: {
    chart
  },
  mounted() {},
  watch: {
    value(res) {
      this.fetchMap(res);
    }
  },
  data() {
    return {
      mapOption: {}, //  地图option
      linesData: [], //  线路坐标
      cityArr: [], //  地点坐标
      areaDatas: [] //  区域的坐标
    };
  },
  methods: {
    fetchMap(data) {
      // 地图自定义样式
      var points = data.map(item => {
        return [item.lng, item.lat, item.num];
      });
      var option = {
        animation: false,
        bmap: {
          center: [113.6313915479, 34.7533581487],
          zoom: 10,
          roam: true
        },
        visualMap: {
          show: false,
          top: "top",
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ["blue", "blue", "green", "yellow", "red"]
          }
        },
        series: [
          {
            type: "heatmap",
            coordinateSystem: "bmap",
            data: points,
            pointSize: 5,
            blurSize: 6
          }
        ]
      };
      var self = this;
      self.mapChart = echarts.init(document.getElementById("map"));
      self.mapChart.setOption(option);
    }
  }
};
</script>

<style scoped>
.mapCon {
  height: 1080px;
  width: 1920px;
  left: 0px;
  position: fixed;
  top: 0px;
}
</style>
